<template>
  <div class="SearchFiled" v-show="filterFiledTmp.length > 0">
      <p>{{$t(searchList.filterField)}}</p>
      <div>
        <a-tag v-for="(item, index) in filterFiledTmp" closable @close="(e)=>close(e, item)" :key="item.id + index">{{item.type}}：{{item.name}}</a-tag>
      </div>
      <a href="javascript:;" @click="clear">{{$t('common.eliminate')}}</a>
  </div>
</template>

<script>
export default {
  name: 'SearchFiled',
  props: ['searchList', 'selectField'],
  data () {
    return {
      nameTmp: '',
      filterFiledTmp: []
    }
  },
  created () {
  },
  watch: {
    selectField: {
      handler (newValue, oldValue) {
        if (newValue && JSON.stringify(oldValue).indexOf(JSON.stringify(newValue)) === -1) {
          this.filterFiledTmp = this.filterFiled(this.selectField)
        }
      },
      deep: true,
      immediate: false
    }
  },
  methods: {
    searchName (list, id) {
      return list.some(item => {
        if (item.id === id) {
          this.nameTmp = item.title
          return true
        } else {
          if (item.children) {
            this.searchName(item.children, id)
          }
        }
      })
    },
    filterFiled (field) {
      if (field.keyword) {
        delete field.keyword
      }
      let obj = []
      for (let item in field) {
        let values = {}
        if (field[item]) {
          values.name = field[item]
          // this.searchList.some(element => {
          this.searchList.some(j => {
            if (j.id === item) {
              if (j.type === 'select') {
                j.values.map(v => {
                  if (v.id === values.name) {
                    values.name = v.name
                  }
                })
              }
              if (j.type === 'date') {
                values.name = values.name.to
              }
              if (j.type === 'dateRange') {
                values.name = values.name.from + '~' + values.name.to
              }
              if (j.type === 'checkbox') {
                values.name = values.name ? '是' : '否'
              }
              if (j.type === 'treeSelect') {
                this.searchName(j.treeData, values.name)
                values.name = this.nameTmp
              }
              values.type = j.name
              values.id = j.id
              return true
            }
          })
          obj.push(values)
          // })
        }
      }
      return obj
    },
    close (e, item) {
      e.preventDefault()
      this.$emit('close', item.id)
    },
    clear () {
      this.$emit('clear')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.SearchFiled
  display flex
  align-items center
  background yellowBackground
  border-left 1px solid lightGreen
  border-width 4px
  padding 12px 24px
  div
    flex 1
  span
    display inline-block
    background eeeGrey
    padding 4px 6px
    border-radius borderRadius
    margin 3px 3px
    &:first-child
      margin-left 12px
  a
    margin-left auto
    cursor pointer
</style>
